<template>
    <div>
        <h1>高梦洁身高</h1>
        <h2>{{ str }}厘米</h2>
        <ul>
            <li v-for="(item,index) in aa" :key="item">
                {{ index }}--{{ item }}
            </li>
        </ul>
        
        <h2>{{ obj }}</h2>
        <table border="2">
            <tbody>
                <tr>
                    <th>name</th>
                    <th>age</th>
                    <th>sex</th>
                </tr>
                <tr v-for="item in obj">
                    <th>{{item.name}}</th>
                    <th>{{item.age}}</th>
                    <th>{{item.sex}}</th>
                </tr>
            </tbody>
        </table>
        <input type="button" value="生长" @click="gao">
    </div>
</template>

<script setup lang="ts">
 import{ref} from 'vue';
  let str=ref(20);
  let aa=[1,5,8,10,22,125];
  let obj=
  [
    {"name":"张三","age":20,"sex":"男"},
    {"name":"李四","age":33,"sex":"男"},
    {"name":"王五","age":31,"sex":"女"},
    {"name":"赵六","age":53,"sex":"男"},
    {"name":"孙七","age":23,"sex":"女"}
  ]
  const gao=()=>
  {
    str.value+=10;
  }

</script>

<style scoped>

</style> 